<template>
    <div class="page-wrapper">

        <!-- 操作按钮组 -->
        <div class="btn-group">
            <slot name="btn-group"></slot>
        </div>

        <!-- 搜索按钮组 -->
        <div class="btn-group">
            <slot name="search-btn-group"></slot>
        </div>

        <!-- 表格 -->
        <div class="table">
            <slot name="table" />
        </div>
        <!-- 分页 -->
        <div v-if="showPager" class="pager">
            <el-pagination
                background
                @size-change="(e: number) => {emits('handlePagerSizeChange',e)}"
                @current-change="(e: number) => {emits('handlePagerIndexChange',e)}"
                :current-page="pager.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pager.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pager.itemCount"
            >
            </el-pagination>
        </div>

        <slot name="other" />
    </div>
</template>

<script setup lang="ts">
import { defineProps,defineEmits,withDefaults } from 'vue'
     // 采用ts专有声明，有默认值
    interface PropsInterface {
        pager: {[propName: string]: any},
        showPager?: boolean
    }
    withDefaults(defineProps<PropsInterface>(), {
        pager: () => {
            return {
                pageIndex: 1,
                pageSize: 10
            }
        },
        showPager: true
    })

    const emits = defineEmits(['handlePagerIndexChange','handlePagerSizeChange'])
</script>

<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  name: "list-layout",
});
</script>

<style lang="scss" scoped>
    .page-wrapper {
        flex: 1;
        overflow: auto;
        background-color: #fff;
        border-radius: 8px;
        margin: 12px;
        padding: 12px;
        
        .table {
            width: 100%;
            margin: 12px 0;
        }
        
        .pager {
            text-align: center;
        }
    }


</style>